<template>
  <div ref="scroll">
    <div class="banner" >
      <img :src="banner.picUrl" @click="toSheet()"/>
      <div class="icon" @click="toSheet()">
        <span><i class="iconfont icon-crown"></i></span>
        <span>精品歌单</span>
      </div>
      <div class="lebel">
        <span>{{ banner.name }}</span>
      </div>
    </div>
    <div class="tab" ref="tab">
      <ul>
        <li
          v-for="item in tabList"
          :key="item.name"
          @click="clickTab(item.name)"
          :class="hoverTab==item.name ? 'active':''"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="songListAll">
      <div class="item" v-for="item in songList" :key="item.id">
          <song-list-item
          :imgUrl="item.coverImgUrl"
          :playCount="item.playCount"
          :listID="item.id"
          :label="item.name"
          :author="item.creator.nickname"
        ></song-list-item>
      </div>
    </div>
    <paging :pagingMethod="getPlaylist" :totalPages="totalPages" :load="hoverTab"></paging>
  </div>
</template>

<script>
import { recommendListAPI, SonglistTabAPI, playlistAPI } from "@/api/index";
import Paging from '@/components/Paging'
import SongListItem from "@/components/SongListItem";
export default {
  data() {
    return {
      banner: {},  //头顶精选歌单
      tabList: [],  //tab栏
      hoverTab: "",  //当前选中tab
      songList: [],  //歌单列表
      totalPages:0,  //总的页数
    };
  },
  components: {
    SongListItem,Paging
  },
  watch:{
    //侦听hover的变化，如果变化，就发送请求
    hoverTab(){
      this.getPlaylist(1);
    }
  },
  methods: {
    async getbanner() {
      const res = await recommendListAPI({ limit: 1 });
      this.banner = res.data.result[0];
    },
    async SonglistTab() {
      const res = await SonglistTabAPI();
      this.tabList = res.data.tags;
      //让hovertab初始值为tab第一个
      this.hoverTab = this.tabList[0].name
    },
    clickTab(value) {
      this.hoverTab = value;
    },
    async getPlaylist(pages) {
      let offset = (pages-1)*40;
      const res = await playlistAPI({ cat: this.hoverTab, limit: 40 ,offset});
      this.totalPages = Math.ceil(res.data.total/40)
      this.songList = res.data.playlists;
      if(pages!=1)
      this.main.scrollTo({top:this.$refs.tab.offsetTop-60});
    },
    // 头部精选歌单
    toSheet(){
      this.$router.push({
        name:'songsheet',
        query:{
          id:this.banner.id
        }
      })
    }
  },
  computed:{
    // 用于页面跳转
    main(){
      return this.$store.state.scroll.main;
    }
  },
  created() {
    this.getbanner();
    this.SonglistTab();
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 95%;
  height: 180px;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: rgba(255, 122, 158, 0.1);
  img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 15px;
    left: 0px;
    margin-left: 15px;
    border-radius: 6px;
    display: block;
    border-radius: 8px;
    cursor: pointer;
  }
  span {
    display: block;
    font-weight: lighter;
  }
  .icon {
    cursor: pointer;
    position: absolute;
    width: 100px;
    height: 30px;
    left: 175px;
    top: 45px;
    border: 1px solid rgb(231, 170, 90);
    border-radius: 15px;
    line-height: 30px;
    .iconfont {
      margin-left: 14px;
    }
    span {
      font-size: 12px;
      margin-right: 3px;
      float: left;
      color: rgb(231, 170, 90);
    }
  }
  .lebel {
    position: absolute;
    bottom: 62px;
    left: 175px;
  }
}
.tab {
  width: 100%;
  margin-left: 24px;
  ul {
    width: 80%;
    display: flex;
    li {
      float: left;
      font-size: 14px;
      font-weight: lighter;
      padding: 4px 6px 4px 6px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      background-color: rgb(254, 248, 250);
      color: #ff7a9e;
      border-radius: 16px;
    }
  }
}
.songListAll {
  width: 95%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
 .item:last-child:nth-child(5n-1) {
      margin-right: 153px;
  }
  .item:last-child:nth-child(5n-2) {
    margin-right: 314px;
  }
  .item:last-child:nth-child(5n-3) {
    margin-right: 467px;
  }
  .item:last-child:nth-child(5n-4) {
    margin-right: 620px;
  }
}
</style>